<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Echo Environmental</title>
    <link rel="stylesheet" href="./styles.css">
</head>

<body>

    <header class="header">
        <div class="logo">
            <img src="./assets/icon1.png" alt="Echofy Logo">
        </div>
        <nav class="nav">
            <a href="#">Home</a>
            <a href="#">Information</a>
            <a href="#">Activities</a>
            <a href="#">center</a>
            <input type="text" class="search-bar" placeholder="搜索">
        </nav>
        <a href="#" class="quote-button">Get A Quote</a>
    </header>



    <section class="banner">
        <div class="banner-content">
            <div class="banner-word">
                <h1>Be Safe Controls Environment</h1>
                <p>Environmental protection projects and donation activities.</p>
            </div>
            <div class="button-group">
                <a href="#" class="button green-button">Let's Talk</a>
                <a href="#" class="button black-button">Read More</a>
            </div>
        </div>
        <div class="banner-image">
            <img src="./assets/4.png" alt="Green Plant">
        </div>
        <section class="section-3d">
        </section>
    </section>


    <section class="bottom-nav">
        <a href="#">Ocean-Recycling</a>
        <a href="#">Environmental</a>
        <a href="#">Renewable-Energy</a>
        <a href="#">Ocean-Recycling</a>
        <a href="#">Environmental</a>
    </section>


    <section id="projects">
        <h2>Our Current Projects</h2>
        <div class="project-cards">
            <div class="project-card">
                <img src="./assets/8.png" alt="Sustainable Agriculture">
                <h3>Sustainable Agriculture</h3>
                <p>Information about sustainable agriculture projects.</p>
                <a href="#">More Details</a>
            </div>
            <div class="project-card">
                <img src="./assets/7.jpg" alt="Help Young Planting">
                <h3>Help Young Planting</h3>
                <p>Support for planting new trees in local areas.</p>
                <a href="#">More Details</a>
            </div>
            <div class="project-card">
                <img src="./assets/6.jpg" alt="Clean Environment Ever">
                <h3>Clean Environment Ever</h3>
                <p>Initiatives to promote clean environment efforts.</p>
                <a href="#">More Details</a>
            </div>
        </div>
        <button class="view-more">View More Projects</button>
    </section>



    <section id="donation">
        <h2>Protect & Care for Our Environment</h2>
        <p>Need urgent donation for ongoing environmental projects.</p>
        <div class="donation-progress">
            <div class="progress-bar">
                <div class="progress" style="width: 50%;"></div>
            </div>
            <div class="donation-stats">
                <div class="stat"><strong>$49,610</strong> Raised</div>
                <div class="stat"><strong>$85,790</strong> Needed</div>
                <div class="stat"><strong>208</strong> Donors</div>
                <div class="stat"><strong>34</strong> Days to go</div>
            </div>
        </div>
        <button class="donate-now">Donate Now</button>
    </section>


    <section id="product-list">
        <div class="product-box">
            <img src="./assets/13.png" alt="Bare-Root">
            <div class="product-info">
                <h3>Green plant creative photography</h3>
                <p>We are looking for creative lovers or photographers who love nature and greenery...</p>
                <button class="availability-btn">Know More</button>
            </div>

        </div>

        <div class="product-box">
            <img src="./assets/14.png" alt="Containers, Plugs, and Bulbs">
            <div class="product-info">
                <h3>Network green plants to share the great reward</h3>
                <p>Join the Green plant family to discuss on social forums...</p>
                <button class="availability-btn">Know More</button>
            </div>
        </div>

        <div class="product-box">
            <img src="./assets/12.png" alt="Cuttings">
            <div class="product-info">
                <h3>Green plant environment protection game</h3>
                <p>Experience a thrilling virtual adventure and enjoy the joy of greenery...</p>
                <button class="availability-btn">Know More</button>
            </div>
        </div>
    </section>


    <section id="make-donation">
        <h2>Make Donation</h2>
        <form action="#">
            <input type="text" placeholder="Name" required>
            <input type="email" placeholder="Email" required>
            <input type="number" placeholder="Donation Amount" required>
            <button type="submit">Donate Now</button>
        </form>
        <div class="stats-overview">
            <div class="stat-box">
                <strong>496</strong> Projects Completed
            </div>
            <div class="stat-box">
                <strong>93,710</strong> Trees Planted
            </div>
            <div class="stat-box">
                <strong>3,847</strong> Active Volunteers
            </div>
            <div class="stat-box">
                <strong>399+</strong> Projects Worldwide
            </div>
        </div>
    </section>



    <section>
        <div class="contact-section">
            <div class="contact-box">
                <h2>Get In Touch</h2>
                <p>We’d love to hear about your project. Let us know and we’ll get back to you as soon as possible.</p>
                <address>
                    <p></p>
                    <p>036 08 Martin - Sixii</p>
                </address>
                <button class="contact-btn">Contact Us</button>
            </div>
        </div>
    </section>



    <section class="cta-section">
        <h2>STILL WANT TO SEE OUR CHARITY FRIENDLY MARKET?</h2>
        <p>Let's open our environmentally friendly market!</p>
        <button class="shop-button">SHOP NOW</button>
    </section>




    <footer class="footer">
        <p>版权信息：树木科普与保护活动 | 联系我们 | 隐私政策</p>
    </footer>



    <script type="importmap">
        {
            "imports": {
                "three": "./three.module.js",
                "three/addons/": "./jsm/"
            }
        }
    </script>

    <script type="module">

        import * as THREE from 'three';

        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

        const scene = new THREE.Scene();

        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);


        const parent = document.querySelector('.section-3d')

        const { width, height } = parent.getBoundingClientRect()

        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
        renderer.setSize(width, height);
        renderer.setPixelRatio(window.devicePixelRatio);
        parent.appendChild(renderer.domElement);
        renderer.setClearColor(0x000000, 0);



        const clock = new THREE.Clock();



        let mixer = null;


        const loader = new GLTFLoader();
        loader.load('./model.glb', function (gltf) {
            scene.add(gltf.scene);


            mixer = new THREE.AnimationMixer(gltf.scene);

            for (let i = 0; i < gltf.animations.length; i++) {
                const animation = gltf.animations[i];
                const action = mixer.clipAction(animation);
                action.play(); // 开始播放动画
                action.setLoop(THREE.LoopRepeat); // 设置为循环播放，默认情况下就是LoopRepeat
            }
        });




        const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
        scene.add(ambientLight);

        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
        directionalLight.position.set(5, 5, 5);
        scene.add(directionalLight);


        camera.position.set(-2.553841010903035, 0.25, 0.04)

        const controls = new OrbitControls(camera, parent);

        console.log(controls)

        // 最大视角
        controls.maxPolarAngle = Math.PI / 2;
        controls.minPolarAngle = Math.PI / 2;

        // 最大距离
        // controls.maxDistance = 3;
        // 最小距离
        // controls.minDistance = 1.7;


        // 相机聚焦位置
        controls.target.set(0.2707882402085072, 0.664158786314874, 0.09367832326199677)
        // 相机位置
        controls.object.position.set(-1.4015630018447989, 0.6641587863148741, 0.4743556475726513)

        // 自动旋转
        // controls.autoRotate = true;
        // 禁止拖动
        controls.enablePan = false;
        // 禁止缩放
        controls.enableZoom = false;
        controls.enableDamping = true;

        const animate = function () {
            requestAnimationFrame(animate);
            controls.update();

            if (mixer) {
                mixer.update(clock.getDelta());
            }
            // action.update(clock.getDelta());
            renderer.render(scene, camera);
        };
        requestAnimationFrame(animate);



    </script>

</body>

</html>